<!--
 * @author: sanbao
 * @Date: 2022-07-23 10:36:34
-->
<style lang='scss' scoped>
.params {
  .title {
    background-color: #fcf6ed;
    padding: 10px 10px;
    color: #dca550;
    .el-icon {
      font-size: 20px;
      margin-right: 10px;
    }
  }
  .paramstop {
    margin: 20px 0;
  }
}
</style>

<template>
  <div class="params">
    <div class="title">
      <el-icon><InfoFilled /></el-icon>注意：只允许为第三级分类设置相关参数！
    </div>
    <div class="paramstop">
      <span>选择商品分类：</span>
      <el-cascader
        v-model="value"
        :options="options"
        :props="{ value: 'cat_id', label: 'cat_name' }"
        @change="handleChange"
      />
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="many">
        <el-button type="primary" :disabled="buttonflag" @click="addparamslist">
          添加参数
        </el-button>
        <my-table
          :tablelist="tablelist"
          :tableData="tableData"
          @handlebuttonmini="handlebuttonmini"
          @handeltablebutton="handeltablebutton"
        ></my-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" :disabled="buttonflag" @click="addparamslist">
          添加属性
        </el-button>
        <my-table
          :tablelist="tablelist"
          :tableData="tableData"
          @handlebuttonmini="handlebuttonmini"
          @handeltablebutton="handeltablebutton"
        ></my-table>
      </el-tab-pane>
    </el-tabs>
    <my-loanding
      :loadingdata="loadingdata"
      :loandformVal="loandformVal"
      @handelloandbutton="handelloandbutton"
    ></my-loanding>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  watch,
} from "vue";
import ParamsModel from "@/api/params";
import { ParamsData } from "@/type/params";
import type { TabsPaneContext } from "element-plus";
import MyTable from "@/components/child/MyTable.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import MyLoanding from "@/components/child/MyLoanding.vue";
export default defineComponent({
  components: { MyTable, MyLoanding },
  setup() {
    onMounted(() => {
      getparamslist();
    });
    const data = reactive(new ParamsData());
    const list = reactive({
      value: "",
      activeName: "many",
      buttonflag: true,
      loandformVal: {},
      falgID: -1,
      name: "many",
      loadingdata: {
        title: "",
        formleftwidta: "100px",
        formwidth: "30%",
        dialogFormVisible: false,
        formlist: [
          {
            type: "input",
            model: "attr_name",
            label: "动态参数",
          },
        ],
        // 正则
        rules: {
          attr_name: [
            { required: true, message: "请输入动态参数", trigger: "blur" },
          ],
        },
        formbutton: [
          {
            name: "取消",
            type: "danger",
            action: "no",
          },
          {
            name: "确定",
            type: "primary",
            action: "yes",
          },
        ],
      },
    });
    watch(
      () => list.activeName,
      (Newval) => {
        if (Newval == "only") {
          data.tablelist[2].label = "参数名称";
        } else {
          data.tablelist[2].label = "属性名称";
        }
      }
    );
    const getparamslist = async () => {
      const response = await ParamsModel.getcategorieslist();
      if (response.data.meta.status == 200) {
        data.options = response.data.data;
      }
    };
    const handleChange = async () => {
      if (list.value.length != 3) {
        list.buttonflag = true;
      } else {
        // console.log(list.value[2]);
        list.buttonflag = false;
        const id = list.value[2];
        const response = await ParamsModel.getattributeslist(
          id,
          String(list.name)
        );
        if (response.data.meta.status == 200) {
          data.tableData = response.data.data;
        }
      }
    };

    const handleClick = (e: any) => {
      // console.log(list.activeName);
      handleChange();
      if (e.index == 0) {
        list.name = "only";
      } else if (e.index == 1) {
        list.name = "many";
      }
    };

    const handlebuttonmini = async (obj: any) => {
      const { object, id } = obj;
      const PUTid = list.value[2];
      const response = await ParamsModel.PUTattributes(
        Number(PUTid),
        id,
        object
      );
      if (response.data.meta.status == 200) {
        handleChange().then(() => {
          ElMessage.success(response.data.meta.msg);
        });
      } else {
        ElMessage.error(response.data.meta.msg);
      }
    };
    // 表格按钮
    interface handeltablebutton {
      action: any;
      id: any;
    }
    const handeltablebutton = (anyEI: handeltablebutton) => {
      const { action, id } = anyEI;
      const DELETEID = list.value[2];
      if (action == "delete") {
        ElMessageBox.confirm("确定要删除这条数据吗？？？", "警告⚠️", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const response = await ParamsModel.deleteattributeslist(
              Number(DELETEID),
              id
            );
            if (response.data.meta.status == 200) {
              handleChange().then(() => {
                ElMessage.success(response.data.meta.msg);
              });
            } else {
              ElMessage.success(response.data.meta.msg);
            }
          })
          .catch(() => {
            ElMessage.error("已取消删除");
          });
      } else if (action == "edit") {
        handleEditDialog(id);
      }
    };
    const addparamslist = () => {
      handleOpenDialog();
      list.falgID = -1;
    };
    //添加弹窗
    const handleOpenDialog = () => {
      list.loadingdata.dialogFormVisible = true;
      list.loadingdata.title = "添加动态参数";
    };
    // 编辑弹窗
    const handleEditDialog = (id: number) => {
      list.loadingdata.dialogFormVisible = true;
      list.loadingdata.title = "静态参数";
      findparamslist(id);
    };
    // 关闭清空弹窗
    const handleDialogReset = () => {
      list.loadingdata.dialogFormVisible = false;
      list.loandformVal = {};
    };
    // 发送数据
    const addparams = async () => {
      const rowID = list.value[2];
      let object = {
        ...list.loandformVal,
        attr_sel: list.name,
      };
      if (list.falgID == -1) {
        // 添加
        const response = await ParamsModel.addparamslist(Number(rowID), object);
        if (response.data.meta.status == 201) {
          handleChange().then(() => ElMessage.success(response.data.meta.msg));
          handleDialogReset();
        }
      } else {
        // 编辑
        // console.log("编辑");
        const response = await ParamsModel.deitparamslist(
          Number(rowID),
          list.falgID,
          Object(object)
        );
        if (response.data.meta.status == 200) {
          handleChange().then(() => ElMessage.success(response.data.meta.msg));
          handleDialogReset();
        }
      }
    };

    //弹窗按钮
    const handelloandbutton = (anyEI: any) => {
      if (anyEI == "yes") {
        // 确定
        addparams();
      } else if (anyEI == "no") {
        // 取消
        handleDialogReset();
        ElMessage.success("取消");
      }
    };
    // 单个数据查询
    const findparamslist = async (id: number) => {
      const rowID = list.value[2];
      const response = await ParamsModel.findparamslist(
        Number(rowID),
        id,
        String(list.name)
      );
      if (response.data.meta.status == 200) {
        list.falgID = response.data.data.attr_id;
        list.loandformVal = response.data.data;
      }
    };
    return {
      ...toRefs(data),
      ...toRefs(list),
      handleChange,
      handleClick,
      handlebuttonmini,
      handeltablebutton,
      addparamslist,
      handelloandbutton,
    };
  },
});
</script>
